<template>
    <BasePopPanel
        style="z-index: 999"
        :title="popTitle"
        width="1600px"
        height="734px"
        @close="onClose"
    >
        <div class="pop-content">
            <div class="left-list">
                <ElScrollbar>
                    <div
                        class="item"
                        :class="{ active: selectVideo === item.key }"
                        v-for="item in videoList"
                        :key="item.cameraName"
                        @click="selectVideo = item.key"
                    >
                        <span
                            class="dot"
                            :style="{
                                backgroundColor:
                                    item.status === 'ON' ? '#01fe85' : 'rgb(128 128 128)',
                            }"
                        />
                        <span class="text">{{ item.cameraName }}</span>
                    </div>
                </ElScrollbar>
            </div>
            <CameraVideoPlay :info="selectVideoInfo" @close="onClose" />
        </div>
    </BasePopPanel>
</template>

<script setup lang="ts">
import { getVideoCameraListV3 } from '@/api/camera'
import BasePopPanel from '@/components/BasePopPanel/index.vue'
import CameraVideoPlay from './CameraVideoPlay.vue'

// props 定义
const props = defineProps<{
    info: any
}>()
// emit 定义
const emit = defineEmits(['close'])
const popTitle = `视频监控`
const onClose = () => {
    emit('close')
}

/**
 * 摄像头列表
 */
const videoList = shallowRef<any[]>([])
const selectVideo = ref('')
const selectVideoInfo = ref<any>(null)
watch(selectVideo, () => {
    if (selectVideo.value) {
        const targetCamera = videoList.value.find(c => c.key === selectVideo.value)
        if (targetCamera) {
            selectVideoInfo.value = targetCamera
        } else {
            selectVideoInfo.value = null
        }
    }
})
const fetchData = async () => {
    try {
        const { data } = await getVideoCameraListV3({
            objIds: props.info.code,
            type: props.info.type,
        })
        videoList.value = (data?.list ?? []).map((item: any) => {
            return {
                ...item,
                key: `${item.cameraName}_${item.channelId}_${item.deviceId}`,
            }
        })
        selectVideo.value = videoList.value[0]?.key ?? ''
    } catch (error) {
        console.error(error)
    }
}
onMounted(() => {
    fetchData()
})
</script>

<style lang="scss" scoped>
.pop-content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;

    .left-list {
        width: 360px;
        height: 100%;
        margin-right: 20px;

        .item {
            width: 100%;
            height: 50px;
            cursor: pointer;
            border-bottom: 1px solid rgba(255, 255, 255, 0.048);
            padding-left: 12px;
            display: flex;
            align-items: center;

            .dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                margin-right: 8px;
                flex-shrink: 0;
            }

            .text {
                width: calc(100% - 48px);
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                align-items: center;
                font-size: 18px;
            }

            &.active {
                color: #01fe85;
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 4px;
            }
        }
    }

    .right-content {
        width: calc(100% - 380px);
        height: 100%;
        position: relative;

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    }
}
</style>
